<template>
  <div class="mod-seckill-seckill">
    <el-select v-model="searchForm.cpName" filterable remote reserve-keyword placeholder="清单名称"
      :remote-method="queryName" :loading="loading">
      <el-option v-for="(item,index) in nameOptions" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="searchForm.cpId" filterable remote reserve-keyword placeholder="采购单号"
      :remote-method="queryDanhao" :loading="loading">
      <el-option v-for="(item,index) in bianhaoOption" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="searchForm.cpStatus" placeholder="请选择状态">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" @click='search'>搜索</el-button>
    <el-button type="primary" @click='zhikong'>置空</el-button>
    <el-button type="primary" @click='out'>导出</el-button>
    <avue-crud style='margin-top:20px' ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading"
      :option="tableOption" @on-load="getDataList" @refresh-change="refreshChange">
      <template slot-scope="scope" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="goEdit(scope.row.id)">
          查看</el-button>
      </template>
      <template slot-scope="scope" slot="status">
        <span>{{scope.row.status=="0"?'未提报':'已提报'}}</span>
      </template>
    </avue-crud>
    <!-- 清单详情 -->
    <QdDetailView v-if='detailVisible' ref='detail' :id='id'></QdDetailView>

  </div>
</template>

<script>
  import {
    tableOption
  } from '@/crud/huicai/qdList'
  import QdDetailView from './qd-detail-view'
  export default {
    data() {
      return {
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        searchForm: {
          cpName: '',
          cpId: '',
          cpStatus: ''
        },
        seckillAuditVisible: false,
        dataListLoading: false,
        tableOption: tableOption,
        addOrUpdateVisible: false,
        options: [{
          value: '0',
          label: '未提报'
        }, {
          value: '1',
          label: '已提报'
        }],
        value: '',
        state: '',
        detailVisible: false,
        id: '',
        nameOptions: [],
        bianhaoOption: [],
        loading: false
      }
    },
    components: {
      QdDetailView
    },
    // created() {},
    mounted() {
      // 搜索全部
      this.getDataList()
    },
    methods: {
      async out() {
        let {data}= await this.$http({
          url: this.$http.adornUrl('/platform/cp/searchCP/all'),
          method: 'get',
          params: this.searchForm
        })
        if (data.length == 0) {
          this.$message('所选条件数据列表为空')
          return
        }
       data = data.map(item => {
          return {
            ...item,
            status2: item.status == '0' ? '未提报' : '已提报'
          }
        })
        console.log(data)
        this.$export.excel({
          title: "清单详情",
          columns: [{
            label: '清单名称',
            prop: 'name'
          }, {
            label: '采购单号',
            prop: 'collaborativePurchaseTypeId'
          }, {
            label: '提报日期',
            prop: 'createTime'
          }, {
            label: '状态',
            prop: 'status2',
          }],
          data: data
        });
      },
      // 置空
      zhikong() {
        this.searchForm = {
          cpName: '',
          cpId: '',
          cpStatus: ''
        }
      },
      // 查看详情
      goEdit(id) {
        this.detailVisible = true
        this.id = id
        this.$nextTick(() => {
          this.$refs.detail.aa()
        })
      },
      // 清单名称搜索
      queryName(query) {
        if (query !== '') {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl('/platform/cp/fuzzy/search/name/' + query),
            method: 'get',
            params: {}
          }).then(({
            data
          }) => {
            this.loading = false;
            this.nameOptions = data.map(item => {
              return {
                label: item,
                value: item
              }
            })
            console.log(this.nameOptions)
          })
        } else {
          this.nameOptions = [];
        }
      },
      // 订单编号搜索
      queryDanhao(query) {
        if (query !== '') {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl('/platform/cp/fuzzy/search/id/' + query),
            method: 'get',
            params: {}
          }).then(({
            data
          }) => {
            this.loading = false;
            this.bianhaoOption = data.map(item => {
              return {
                label: item,
                value: item
              }
            })
            console.log(this.bianhaoOption)
          })
        } else {
          this.bianhaoOption = [];
        }
      },
      // 条件查询
      search() {
        this.getDataList()
      },
      getDataList(page) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/platform/cp/searchCP'),
          method: 'get',
          params: Object.assign({
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            this.searchForm
          )

        }).then(({
          data
        }) => {
          console.log(data)
          this.dataList = data.records
          this.page.total = data.total
          this.dataListLoading = false
        })
      },

      // // 刷新回调用
      refreshChange() {
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getDataList(this.page)
      },
      // searchChange(params) {
      //   this.searchForm = params
      //   this.getDataList(this.page)
      // },

    }
  }
</script>
<style lang="scss">
  .mod-seckill-seckill {}
</style>
